<template>
	<div class="hy-container">
		<HyTable
			:searchFields="searchFields"
			:searchConfig="searchConfig"
			:searchDefault="searchDefault"
			:tableConfig="tableConfig"
			:tableColumns="tableColumns"
			ref="hyTableRef"
		>
			<template #tableHeader>
				<el-button type="primary" @click="handleOperate('add')" icon="Plus">新增</el-button>
				<el-button @click="handleOperate('import')" icon="upload">导入</el-button>
				<el-button @click="handleOperate('template')" icon="document">模板下载</el-button>
			</template>
			<template #operation>
				<el-table-column fixed="right" label="操作" width="205">
					<template #default="{ row }">
						<div class="flex items-center w-full justify-around">
							<el-button text type="primary" icon="View" @click="handleOperate('view', row)">查看</el-button>
							<el-button text type="primary" icon="Edit" @click="handleOperate('edit', row)">编辑</el-button>
							<el-button text type="danger" icon="Delete" @click="handleOperate('delete', row)">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</template>
		</HyTable>
		<UploadExcel @refreshDataList="refreshDataList" ref="UploadExcelRef" title="机构数据" :url="url" />
	</div>
</template>

<script lang="ts" setup>
import HyTable from '/@/components/HyTable/index.vue';
import { institutionInfoPageApi, institutionInfoDeleteApi } from '/@/api/expertDatabase/institution';
import { ElMessageBox, ElLoading } from 'element-plus';
import other from '/@/utils/other';
import UploadExcel from '/@/components/Upload/Excel.vue';

const tableColumns = computed(() => {
	return [
		{ prop: 'institutionName', label: '第三方机构名称', width: 300 },
		{ prop: 'unifiedSocialCreditcode', label: '统一社会信用代码', width: 300 },
		{ prop: 'registeredAddress', label: '注册地址', width: 300 },
		{ prop: 'contacts', label: '联系人', width: 300 },
		{ prop: 'telephone', label: '联系方式', width: 200 },
	];
});
const tableConfig = computed(() => {
	return {
		request: institutionInfoPageApi,
	};
});
// 配置搜索
const searchFields = computed(() => {
	return {
		keyWords: {
			type: 'input',
			label: '关键字',
		},
	};
});
const searchConfig = computed(() => {
	return {
		labelWidth: '120px',
		type: 'search',
		title: '机构管理',
		show: true,
	};
});
const hyTableRef = ref();

const searchDefault = ref({});
//刷新
const refreshDataList = () => {
	hyTableRef.value?.handleSearch();
};
//操作
const router = useRouter();
const url = ref<string>('');
const UploadExcelRef = ref<any>(null);

const handleOperate = (operateType: string, row?: any) => {
	switch (operateType) {
		//添加
		case 'add':
		case 'edit':
		case 'view':
			router.push({
				path: '/expertDatabase/institution/operate/index',
				query: {
					operateType,
					institutionInfoId: row?.institutionInfoId || '',
				},
			});
			break;
		//删除
		case 'delete':
			ElMessageBox.confirm('是否确定删除?', '操作确认', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				const loading = ElLoading.service({
					lock: true,
					text: '删除中...',
				});
				institutionInfoDeleteApi({ institutionInfoId: row.institutionInfoId })
					.then(() => {
						hyTableRef.value.getTableData();
					})
					.finally(() => {
						loading.close();
					});
			});
			break;
		case 'import':
			url.value = '/manage/institutionInfo/importInfo';
			UploadExcelRef.value.show();
			break;
		case 'template':
			other.downBlobFile('/manage/local/file/机构信息模板.xlsx', {}, `机构信息模板.xlsx`);
			break;
		default:
			break;
	}
};
</script>
<style scoped lang="scss"></style>
